<template>
    <div class="interface-list">
      <el-input size="mini" placeholder="请输入接口名称" prefix-icon="el-icon-search" v-model="searchInterface"></el-input>
      <el-table :data="searchInterfaceData"
                highlight-current-row
                @current-change="currentChange"
                row-class-name="rowCursor">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column property="siaName" label="接口名称" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <i class="el-icon-delete rowCursor" @click="deleteInterface(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
      name: "InterfaceList",
      props: {
        interfaceData: {
          type: Array,
          default: () => []
        }
      },
      data() {
          return{
            searchInterface: "",
            searchInterfaceData: this.interfaceData
          }
      },
      watch: {
        /**接口搜索过滤**/
        searchInterface(val) {
          this.searchInterfaceData = this.interfaceData.filter(item => {
            if (item.siaName.indexOf(val) >= 0) {
              return true;
            }
            return false;
          });
        },
        /**监听接口集合方便赋值给搜索集合**/
        interfaceData(val) {
          this.searchInterfaceData = val;
        }
      },
      methods: {
        /**删除接口**/
        deleteInterface(row) {
          this.$confirm('您确定删除该接口吗?', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            for (let i = 0; i < this.interfaceData.length; i++) {
              if (this.interfaceData[i].siaId === row.siaId) {
                this.interfaceData.splice(i, 1);
                break;
              }
            }
            this.searchInterface = "";
            this.$emit("deleteCall", this.interfaceData.length, row.siaId);
          });
        },
        /**选中的接口**/
        currentChange(row){
          this.$emit("clickRowCall", row);
        },
      }
    }
</script>

<style scoped>
  .interface-list{
    height: 100%;
  }
</style>
